<template>
    <div id="Home">

        <AdvertisementBox
            componentTitle="亲切如友，铭记初心"
            componentContent="友铭物业，给你一个温馨的家"
        />

        <div id="homeRouter">
            <div id="homeMenu" class="container text-center">
                <router-link
                    class="homeMenuItem"
                    v-for="routerItem in routerList"
                    :key="routerItem.key"
                    :to="{ name: routerItem.name }"
                >
                    <span
                        @click="choiceItem(routerItem.key)"
                        :class="activeRouter === routerItem.key ? 'itemActive' : ''"
                    >
                        {{ routerItem.content }}
                    </span>
                </router-link>
            </div>

            <div>
                <router-view/>
            </div>
        </div>

        <PageFooter/>
    </div>
</template>

<script>
    import AdvertisementBox from '@/components/AdvertisementBox.vue'
    import PageFooter from '@/components/PageFooter.vue'

    export default {
        name: "Home",
        components: {
            AdvertisementBox,
            PageFooter
        },
        data() {
            return {
                activeRouter: 'environment',
                routerList: [
                    { key: 'environment', name: 'environment', content: '环境一览' },
                    { key: 'notice', name: 'notice', content: '活动公告' },
                ]
            }
        },
        methods: {
            choiceItem(key) {
                this.activeRouter = key
                console.log(this.activeRouter)
            }
        }
    }
</script>

<style scoped>
    #Home{

    }

    #homeRouter{
        background-color: #dddddd;
    }

    #homeMenu{
        height: 50px;
        position: relative;
    }

    .homeMenuItem{
        font-size: 24px;
    }
    .homeMenuItem span{
        padding: 0 30px;
        display: inline-block;
        line-height: 50px;
        color: #000000;
        transition: 0.4s;
    }
    .homeMenuItem span:hover{
        color: #00A1FF;
        background-color: #cccccc;
    }

    .itemActive{
        color: #00A1FF;
        background-color: #cccccc;
    }
</style>
